<template>
  <view class="custom-tabbar">
    <view class="tabbar-item" v-for="(item, idx) in tabs" :key="idx" :class="{active: current===idx}" @click="onTab(idx,item.file)">
      <view class="tabbar-icon-wrap icon-float" :style="getTabbarIconStyle(idx)">
        <image class="tabbar-icon" :src="item.icon" mode="aspectFit" />
      </view>
      <text class="tabbar-label">{{item.label}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tabs: [
        { label: '赛事直播', icon: 'https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/icon_sszbo_n1.png' ,file:'sszbo'},
        { label: '赛事组别', icon: 'https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/icon_sszbie_n1.png' ,file:'sszbie'}, 
        { label: '赛事新闻', icon: 'https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/icon_ssxw_n1.png' ,file:'ssxw'},
        { label: '关于我们', icon: 'https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/icon_gywm_n2.png' ,file:'gywm'}
      ]
    }
  },
  methods: {
    onTab(idx,file) {
      this.$emit('change', idx,file)
    },
    getTabbarIconStyle(index) {
      if(index === 0) {
        return 'margin-left: -5px;';
      }  if(index === 1) {
        return 'margin-left: -1px;';
      }else if(index === 3) {
        return 'margin-left: 5px;';
      }
      return '';
    }
  }
}
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background: url('https://scoringchina.oss-cn-beijing.aliyuncs.com/biemlfGolf/tab_bg_n.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  z-index: 999;
  border-top: none;
  box-shadow: 0 -8rpx 24rpx rgba(243,108,33,0.08);
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26rpx;
  font-weight: 500;
  position: relative;
}

.tabbar-icon-wrap {
  width: 103rpx;
  height: 90rpx;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.icon-float {
  position: absolute;
  top: -25rpx;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.tabbar-icon {
  width: 103rpx;
  height: 90rpx;
  position: relative;
  z-index: 2;
}
.tabbar-label {
  font-size: 26rpx;
  color: #fff;
  margin-top: 20px;
}
</style>